{% extends "main.tpl" %}
{% block stylesheets %}
	<!-- Additional styles -->
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/form.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/switches.css?v=1">  
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/table.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/modal.css?v=1">
    <!-- DataTables -->
	<link rel="stylesheet" href="{{ javascript_path }}libs/DataTables/jquery.dataTables.css?v=1">
{% endblock %}
{% block content_title %}Users{% endblock %}
{% block content %}

		<div class="with-padding">
        <!-- Wrapper, set tabs style class here -->
            <div class="side-tabs">
            
                <!-- Tabs -->
                <ul class="tabs">
                    <li class="active"><a href="#tab-1">Users</a></li>
                    <li><a href="#tab-2">Groups</a></li>
                    
                    {% if is_admin == true %}<li><a href="#tab-3">Permissions</a></li> {% endif %}	
                    
                </ul>
            
                <!-- Content -->
                <div class="tabs-content">
            
                    <div id="tab-1" class="with-padding">
            
			<table class="table responsive-table sorting-advanced">
				<thead>
					<tr>
						<th scope="col"><input type="checkbox" name="check-all" id="check-all" value="1"></th>
						<th scope="col">Email</th>
						<th scope="col" width="15%" class="align-center">Username</th>
						<th scope="col" width="15%" class="align-center">Group</th>
						<th scope="col" width="15%" class="align-center">Status</th>
						<th scope="col" width="200" class="align-right">Actions</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td colspan="6">
							{{ users|length }} entries found {{ user.id }}
						</td>
					</tr>
				</tfoot>
				<tbody>
                	{% for user in users %}
					<tr>
						<th scope="row" class="checkbox-cell"><input type="checkbox" name="checked[]" id="check-1" value="1"></th>
						<td>{{ user.email }}</td>
						<td class="align-center">{{ user.username }}</td>
						<td class="align-center">{{ user.group_name }}</td>
						<td class="low-padding align-center">
                        	{% if user.active == 1 %}
                            	<small class="tag green-bg">Enabled</small>
                            {% elseif user.activation_code|length > 0 %}
                            	<small class="tag orange-bg">Non-verified</small>
                            {% else %}
                            	<small class="tag grey-bg">Disabled</small>
                            {% endif %}
                        </td>
						<td class="low-padding align-right">
							<span class="button-group compact">
                            	{% if permission('cms', 'user_edit', false) == true %}
								<a href="{{ cms_uri }}/users/edit/{{ user.id }}" class="button icon-pencil">Edit</a>
                                {% endif %}
                                {% if permission('cms', 'user_enable', false) == true %}
                                    {% if user.active == 1 %}
                                    <a href="{{ cms_uri }}/users/disable/{{ user.id }}" class="button icon-pause confirm with-tooltip" title="This will de-activate the account<br /> the user will not be able to log in.">Disable</a>
                                    {% else %}
                                    <a href="{{ cms_uri }}/users/enable/{{ user.id }}" class="button icon-play confirm with-tooltip" title="This will enable the account so the user can log in.">Enable</a>
                                    {% endif %}
                                {% endif %}							
							</span>                        
                        
							                       
                        </td>
					</tr>
                    {% endfor %}                   
				</tbody>
			</table>
<br />
            <ul class="bullet-list">
	<li><small class="tag green-bg">Enabled</small> Active account</li>
	<li><small class="tag orange-bg">Not-verified</small> This user has to complete the verification process (check his email + junk folder)</li>
	<li><small class="tag grey-bg">Disabled</small> This account can not log in</li>
</ul>
                    </div>
            
                    <div id="tab-2" class="with-padding">
                    {% if permission('cms', 'group_edit', false) == true %}
                   <p> <a href="#" id="create_group" class="button icon-star">Create group</a></p>
                   {% endif %}
			<table class="table responsive-table">
				<thead>
					<tr>
						<th scope="col" width="15" class="align-center">ID</th>
						<th scope="col" width="15%" class="align-center">Name</th>
						<th scope="col">Description</th>
						<th scope="col" width="15%" class="align-center">Tags</th>
						<th scope="col" width="300" class="align-center">Actions</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td colspan="5">
							{{ groups|length }} entries found
						</td>
					</tr>
				</tfoot>
				<tbody>
                	{% for group in groups %}
					<tr>
						<td class="align-center">{{ group.id }}</td>
						<td class="align-center">{{ group.name }}</td>
						<td>{{ group.description }}</td>
						<td class="low-padding align-center">
                        	{% if group.name == config_item('default_group') %}
                            	<small class="tag green-bg">Default</small>
                            {% endif %}
                            {% if group.name == config_item('admin_group') %}
                            	<small class="tag red-bg">Admin</small>
                            {% endif %}    
                            
                            
                        </td>
						<td class="low-padding  align-center">
							<span class="button-group compact">
                            	{% if permission('cms', 'group_edit', false) == true %}
								<a href="{{ cms_uri }}/users/edit_group/{{ group.id }}" class="button icon-pencil">Edit</a>
                                {% endif %}
                                
                                {% if permission('cms', 'group_edit', false) == true %}
                                <a href="{{ cms_uri }}/users/delete_group/{{ group.id }}" class="button icon-trash confirm with-tooltip" title="This will remove the group and put all <br />its users in the default group ">Remove</a>						
                                {% endif %}
                                
                                {% if is_admin == true %}
                                <a href="{{ cms_uri }}/users/default_group/{{ group.id }}" class="button icon-flag confirm with-tooltip green-gradient" title="Making this the default group where users <br />will be placed in after creation/registration">Default</a>	
                                {% endif %}
                                
                                {% if is_admin == true %}
                                <a href="{{ cms_uri }}/users/admin_group/{{ group.id }}" class="button icon-flag confirm with-tooltip confirm red-gradient" title="Making this the admin group">Admin</a>	
                                {% endif %}					
							</span>                        
                        
							                       
                        </td>
					</tr>
                    {% endfor %}                   
				</tbody>
			</table>            
                    </div>
            
           
            		{% if is_admin == true %}
                    <div id="tab-3" class="with-padding">
                    <h2>CMS</h2>
                    <h4>General</h4>
                    <table class="table responsive-table">
                        <thead>
                            <tr>
                                <th scope="col" width="200">Group</th>
                                
                                <th scope="col" class="align-center">Login</th>
                                <th scope="col" class="align-center">Dashboard</th>
                                <th scope="col" class="align-center">Config</th>
                               
                                
                            </tr>
                        </thead>
        
                        <tfoot>
                            <tr>
                                <th colspan="5">
                                    {{ groups|length }} entries found
                                </th>
                            </tr>
                        </tfoot>
                        <tbody>
                            {% for group in groups %}
                            <tr>
                                <td class="align-center">{{ group.name }}</td>
                                <td class="align-center"><input type="checkbox" data-id="{{ group.id }}" data-ajax="cms_login" class="switch mini permission_switch" {% if group.cms_login == 1 %}checked{% endif %}></td>
                                <td class="align-center"><input type="checkbox" data-id="{{ group.id }}" data-ajax="cms_dashboard" class="switch mini permission_switch" {% if group.cms_dashboard == 1 %}checked{% endif %}></td>
                                <td class="align-center"><input type="checkbox" data-id="{{ group.id }}" data-ajax="cms_config" class="switch mini permission_switch" {% if group.cms_config == 1 %}checked{% endif %}></td>
                               
        
                                
                            </tr>
                            {% endfor %}                   
                        </tbody>
                    </table>  
                    
                    
                    <h4>Users and groups</h4>
                    <table class="table responsive-table">
                        <thead>
                            <tr>
                                <th scope="col" width="200">Group</th>
                                
                                <th scope="col" class="align-center">User overview</th>
                                <th scope="col" class="align-center">Edit user</th>
                                <th scope="col" class="align-center">En/dis-able user</th>
                                
                                <th scope="col" class="align-center">Group overview</th>
                                <th scope="col" class="align-center">Edit group</th>
                                
                                
                            </tr>
                        </thead>
        
                        <tfoot>
                            <tr>
                                <th colspan="5">
                                    {{ groups|length }} entries found
                                </th>
                            </tr>
                        </tfoot>
                        <tbody>
                            {% for group in groups %}
                            <tr>
                                <td class="align-center">{{ group.name }}</td>
                                <td class="align-center"><input type="checkbox" data-id="{{ group.id }}" data-ajax="cms_user_list" class="switch mini permission_switch" {% if group.cms_user_list == 1 %}checked{% endif %}></td>
                                <td class="align-center"><input type="checkbox" data-id="{{ group.id }}" data-ajax="cms_user_edit" class="switch mini permission_switch" {% if group.cms_user_edit == 1 %}checked{% endif %}></td>
                                <td class="align-center"><input type="checkbox" data-id="{{ group.id }}" data-ajax="cms_user_enable" class="switch mini permission_switch" {% if group.cms_user_enable == 1 %}checked{% endif %}></td>
                                
       							<td class="align-center"><input type="checkbox" data-id="{{ group.id }}" data-ajax="cms_group_list" class="switch mini permission_switch" {% if group.cms_group_list == 1 %}checked{% endif %}></td>
                                <td class="align-center"><input type="checkbox" data-id="{{ group.id }}" data-ajax="cms_group_edit" class="switch mini permission_switch" {% if group.cms_group_edit == 1 %}checked{% endif %}></td>
                                
        
                                
                            </tr>
                            {% endfor %}                   
                        </tbody>
                    </table>            
                    </div>
                     {% endif %}	
                </div>
            
            </div>
		</div>
        
        <form id="group_form" action="{{ cms_url('users/create_group') }}" method="post" style="display:none">
        	<input type="text" name="name" />
            <input type="text" name="description" />
            <input type="hidden" name="{{ csrf_token }}" value="{{ csrf_hash }}" />            
        </form>
{% endblock %}
{% block javascripts %}

	<!-- Template functions -->
	<script src="{{ javascript_path }}developr.input.js"></script>
	<script src="{{ javascript_path }}developr.navigable.js"></script>
	<script src="{{ javascript_path }}developr.notify.js"></script>
	<script src="{{ javascript_path }}developr.scroll.js"></script>
	<script src="{{ javascript_path }}developr.tooltip.js"></script>
	<script src="{{ javascript_path }}developr.table.js"></script>
	<script src="{{ javascript_path }}developr.tabs.js"></script>
	<script src="{{ javascript_path }}developr.confirm.js"></script>

	<script src="{{ javascript_path }}developr.modal.js"></script>

	<!-- Plugins -->
	<script src="{{ javascript_path }}libs/jquery.tablesorter.min.js"></script>
	<script src="{{ javascript_path }}libs/DataTables/jquery.dataTables.min.js"></script>

	<script>

		// Call template init (optional, but faster if called manually)
		$.template.init();
		
		// Change permission
		$('.permission_switch').change(function(e) {
			var el = $(this).find('input');
			var checked = false;
			if(el.is(':checked'))
				checked = true;
						
			$.ajax({
				dataType:"json",
				type:"POST",
				url:"{{ cms_uri }}/users/toggle_permission/" + el.data("id") + "/" + el.data("ajax"),
				success: function(data)
				{
					if(data.success)
					{
						notify('Permission changed', 'The permission has been changed',{
							icon: '{{ image_path }}demo/picto.png',
							showCloseOnHover: false
						});
					}
					else
					{
						notify('Error', 'The permission has not been changed',{
							icon: '{{ image_path }}demo/picto.png',
							showCloseOnHover: false,
							groupSimilar: false
						});
					}
				}			
			});
        });
		
		// Create group
		$('#create_group').click(function(e) {
            e.preventDefault();
			$.modal.prompt('Enter group name:', function(groupName){
				$.modal.prompt('Enter group description:', function(groupDesc){
					var form = $('#group_form');
					form.find('[name=name]').val(groupName);
					form.find('[name=description]').val(groupDesc);
					form.submit();				
				});
				
			});
        });
		// Table sort - DataTables
		var table = $('.sorting-advanced'),
			tableStyled = false;

		table.dataTable({
			'aoColumnDefs': [
				{ 'bSortable': false, 'aTargets': [ 0, 5 ] }
			],
			'sPaginationType': 'full_numbers',
			'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
			'fnDrawCallback': function( oSettings )
			{
				// Only run once
				if (!tableStyled)
				{
					table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
					tableStyled = true;
				}
			}
		});

	</script>
{% endblock %}

</body>
</html>